<template>
	<div class="modify-dialog">
		<slot> </slot>
		<el-dialog :close-on-click-modal="false" top="8vh" v-bind="dialogOpts" :visible.sync="dialogVisible">
			<!-- <div style="display: inline-block; margin-right: 20px">
				<el-button @click="showGoods = true" size="small" type="success">
					选择商品
				</el-button>
			</div> -->
			<div style="display: inline-block">
				<el-upload
					:show-file-list="false"
					:headers="headers"
					:action="`${$apiHost}/order/quotation/import/execl`"
					:on-success="onSuccess"
				>
					<el-button size="small" type="primary">上传报价单Excel</el-button>
				</el-upload>
			</div>
			<div
				style="display: inline-block; margin-left: 20px"
				v-if="notFound.length"
			>
				<el-button @click="showNotFound = true" size="small" type="danger">
					{{ notFound.length }}条未导入成功
				</el-button>
			</div>
			<div v-if="totalCount" style="display: inline-block; margin-left: 20px">
				总共{{ totalCount }}个产品，总价{{ salePrice }}元
			</div>
			<div style="height: 65vh">
				<el-table :data="tableSource" height="100%">
					<el-table-column label="序号" min-width="50">
						<template #default="scope">
							<span>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="产品ID" prop="id" min-width="100px">
					</el-table-column>
					<el-table-column
						label="产品编号"
						prop="productCode"
						min-width="100px"
					>
					</el-table-column>
					<el-table-column
						label="产品名称"
						prop="productName"
						min-width="150px"
					>
					</el-table-column>
					<el-table-column label="金额" prop="price" min-width="150px">
					</el-table-column>
					<el-table-column label="颜色" prop="colour" min-width="150px">
					</el-table-column>
					<el-table-column label="规格" prop="norms" min-width="150px">
					</el-table-column>
					<el-table-column label="单位" prop="unit" min-width="150px">
					</el-table-column>
					<el-table-column label="套件" prop="d_name" min-width="150px">
					</el-table-column>
					<el-table-column label="数量" prop="count" min-width="150px">
					</el-table-column>
					<!-- <el-table-column
						label="数量（点击编辑）"
						fixed="right"
						min-width="150px"
					>
						<editable-cell
							slot-scope="{ row }"
							:can-edit="true"
							type="number"
							v-model="row.count"
						>
							<span slot="content">{{ row.count }}</span>
						</editable-cell>
					</el-table-column> -->
				</el-table>
			</div>
			<div class="dialog-footer" style="margin-top: 20px">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="onConfirm"> 确 定 </el-button>
			</div>
		</el-dialog>

		<el-dialog
        :close-on-click-modal="false"
			v-bind="{ ...dialogOpts, title: '选择商品', width: '80vw' }"
			:visible.sync="showGoods"
			top="6vh"
		>
			<div style="height: 70vh">
				<ProductManage v-if="showGoods" ref="goodRef" mode="choose" />
			</div>
			<div class="dialog-footer" style="margin-top: 20px">
				<el-button @click="showGoods = false">取 消</el-button>
				<el-button type="primary" @click="onConfirmGoods"> 确 定 </el-button>
			</div>
		</el-dialog>

		<el-dialog
        :close-on-click-modal="false"
			v-bind="{ ...dialogOpts, title: '未导入成功', width: '60vw' }"
			:visible.sync="showNotFound"
			top="6vh"
		>
			<div style="height: 60vh">
				<notFound :notFound="notFound" />
			</div>
			<div class="dialog-footer" style="margin-top: 20px">
				<el-button type="primary" @click="showNotFound = false">
					确 定
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
import EditableCell from "./EditableCell.vue";
import ProductManage from "../ProductManage.vue";
import notFound from "./notFound.vue";
export default {
	mixins: [modifyMixins],
	components: {
		EditableCell,
		ProductManage,
		notFound,
	},
	data() {
		return {
			dialogTitle: "制作报价单",
			dialogWidth: "75vw",
			showNotFound: false,
			showGoods: false,
			tableSource: [],
			directorys: [],
			notFound: [],
		};
	},
	computed: {
		salePrice() {
			const { add, mul } = this.$acc;
			return this.tableSource.reduce(
				(a, b) => add(a, mul(b.count, b.price)),
				0
			);
		},
		totalCount() {
			const { add } = this.$acc;
			return this.tableSource.reduce((a, b) => add(a, b.count), 0);
		},
		prodMap() {
			const res = {};
			const { tableSource } = this;
			tableSource.forEach((item) => {
				res[item.id] = true;
			});
			return res;
		},
		headers() {
			const token = this.token || this.$quinn.getStorage("token");
			return {
				token,
			};
		},
	},
	mounted() {
		// this.showNotFound = true;
	},
	methods: {
		onSuccess(res) {
			const data = res?.result?.filterMaterial || [];
			this.notFound = res?.result?.notFound || [];
			this.directorys=( res?.result?.directorys||[]).map(e=>({
				id: e.id,
				count: e.count
			}))
			if (Array.isArray(data)) this.importData(data);
		},
		onConfirmGoods() {
			const { goodRef } = this.$refs;
			if (goodRef) {
				const { tableRef } = goodRef.$refs;
				if (tableRef) {
					const { multipleSelection } = tableRef;
					const arr = JSON.parse(
						JSON.stringify(
							multipleSelection.map((e) => {
								e.count = 0;
								return e;
							})
						)
					);
					this.showGoods = false;
					this.importData(arr);
				}
			}
		},
		onConfirm() {
			const { id } = this.row || {};
			const params = {
				id,
				quoteDosage: this.directorys
			};
			// return console.log(params);
			this.$api.createQuotation(params).then(this.submitDone);
		},
		importData(data = []) {
			data = data.map((e) => {
				for (const k in e.directory) {
					if (Object.hasOwnProperty.call(e.directory, k)) {
						const v = e.directory[k];
						e[`d_${k}`] = v;
					}
				}
				e.count = `${e.count || 0}`;
				return e;
			});
			const { prodMap, tableSource } = this;
			let tableData = JSON.parse(JSON.stringify(tableSource));
			const arr = [];
			const map = {};
			data.forEach((e) => {
				if (prodMap[e.id]) map[e.id] = e.count;
				else arr.push(e);
			});
			tableData = tableData.map((e) => {
				if (Object.hasOwnProperty.call(map, e.id)) {
					const v = parseInt(e.count) + parseInt(map[e.id]);
					e.count = `${isNaN(v) ? e.count : v}`;
				}
				return e;
			});
			this.tableSource = [...arr, ...tableData];
			console.log(this.tableSource);
		},
		showDialog(modify = "add", row = {}) {
			this.dialogVisible = true;
			this.row = row;
			this.modify = modify || "add";
			this.tableSource = [];
			this.formKey = this.$quinn.guid();
		},
	},
};
</script>

<style lang="less" scoped>
.edit-cell {
	min-height: 40px;
	cursor: pointer;
}
</style>

